/*
 * @FilePath: loadManager.js
 * @Author: 杜芬
 * @Date: 2024-04-30 17:01:09
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-05-11 12:29:18
 * Copyright: 2024 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 页面
 */
// 专门用来加载模型的文件
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import * as THREE from 'three'

import gsap from 'gsap'

const manager = new THREE.LoadingManager()


/**
 * 专门加载模型文件=>模型对象
 * @param {*} pathList 模型文件路径数组
 * @param {*} suc 接收成功结果回调函数
 */

export function loadManager(pathList,suc) {
  // 定义加载对象
  const gltfLoader = new GLTFLoader(manager)
  const fbxLoader = new FBXLoader(manager)

  const model = [] // 保存加载成功模型对象数组
  let preValue = 0 // 上一次进度值
  //   // 加载器对象关联属性和回调函数
  manager.onProgress = (url, loadedNum,totalNum) => {
    // url:当前被加载完成的模型路径
    // loadedNum：当前加载完成的个数（）
    // totalNum：总共要加载的个数
    // * 100 目的：为了让0.5进度变成50后续添加% 后缀
    // 当前已经加载的进度数字
    let propressRatio = Math.floor(loadedNum / totalNum * 100)
    gsap.fromTo('#processing-number',{
      innerText:preValue // 暂时传入一个数字（后面再去加 % 字符 串）
    },{
      innerText:propressRatio,
      onUpdate() {
        // 详细控制显示的内容
        // 取出当前正在做动画的目标对象的属性值（进度数字）
        const num = gsap.getProperty(this.targets()[0],'innerText')
        this.targets()[0].innerText = num + '%'
        preValue = propressRatio  // 把当前最新的加载进度值，赋予到外面变量上
        if(num === 100) {
          suc(model)
          document.querySelector('.loading').style.display = 'none'
        }
      }
    })

    // 对进度条-做动画
    gsap.fromTo('#loading-bar', {
      scaleX : preValue / 100
    },{
      scaleX:propressRatio / 100
    } )


  }



  pathList.forEach(path => {
    if(path.indexOf('fbx') > -1) {
      fbxLoader.load(path,obj => {

        // 数据结构
        model.push({
          model:obj,
          url:path
        });
        // (model.length === pathList.length) && suc(model)
        
      })
    }else if(path.indexOf('gltf') > -1) {
      gltfLoader.load(path,gltf => {
        model.push({
          model:gltf.scene,
          url:path
        });
        // (model.length === pathList.length) && suc(model)
      })
    }
  })
}